<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!--引入Vue-->
  <script type="text/javascript" src="../js/vue.js"></script>
  <title>样式绑定</title>
  <style>
    .basic{
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }
    
    .happy{
      border: 4px solid red;;
      background-color: rgba(255, 255, 0, 0.644);
      background: linear-gradient(30deg,yellow,pink,orange,yellow);
    }
    .sad{
      border: 4px dashed rgb(2, 197, 2);
      background-color: gray;
    }
    .normal{
      background-color: skyblue;
    }

    .atguigu1{
      background-color: yellowgreen;
    }
    .atguigu2{
      font-size: 30px;
      text-shadow:2px 2px 10px red;
    }
    .atguigu3{
      border-radius: 20px;
    }
  </style>

</head>
<body>
  <!--准备好一个容器-->
  <div class="root">
    <div class="basic" :class="mood">{{name}}</div>
    <br>
    <button @click="changeMood">点我变心情</button>
    <br/>
    <br/>
    <hr>
    <div class="basic" :class="arr">{{name}}</div>
    <br>
    <div class="basic" :class="classObj">{{name}}</div>
  </div>

  <script type="text/javascript">
    Vue.config.productionTip=false;

    new Vue({
      el:'.root',
      data:{
        name:'卧槽',
        mood:'happy',
        arr:['atguigu1','atguigu2','atguigu3'],
        classObj:{
            atguigu1:false,
            atguigu2:false,
          }
      },
      methods:{
        changeMood(){
          const arr=['happy','sad','normal']//索引值为0,1,2
          const index=Math.floor(Math.random()*3)//random[0,1) random*3[0,3)
          this.mood=arr[index]


        }
      }
    })
  </script>
</body>
</html>